<template>
    <div class="actionPlan wrap-table">
    	<el-form ref="form" :model="searchData" label-width="100px" class="clearfix">
    		<el-form-item label="已制定行动计划数量" class="pull-left " label-width="140px" style="width:250px;">
    		    <el-select v-model="searchData.count" clearable placeholder="请选择">
    		        <el-option
    		                v-for="item in optionss3"
    		                :key="item.value"
    		                :label="item.label"
    		                :value="item.value">
    		        </el-option>
    		    </el-select>
    		</el-form-item>
    		<el-button type="primary" @click="checkList" class="pull-right mg-lr-20 pd-bt">查询</el-button>
    	</el-form>	
		<template>
			<el-table
				:data="tableData"
				border
				v-loading="loading"
				element-loading-text="加载中"
				style="width: 100%">
				<el-table-column
				    prop="Surname"
				    label="姓名首字母"
				    align="center"
				    min-width="100">
				</el-table-column>
				<el-table-column
				        label="手机号"
				        align="center"
				        min-width="100">
				    <template slot-scope="scope">
				        <el-tooltip :content="scope.row.Mobile" placement="top">
				            <span class="click_line" @click="JumpUserinfo(scope.row)">{{scope.row.Mobile |mobileFilter}}</span>
				        </el-tooltip>
				    </template>
				</el-table-column>
				<el-table-column
				    prop="ResearchNo"
				    label="研究编号"
				    align="center"
				    min-width="100">
				</el-table-column>
				<el-table-column
				    prop="CreateTime"
				    label="登记日期"
				    :formatter="DateFilter"
				    align="center"
				    min-width="100">
				</el-table-column>
				<el-table-column
				    prop="Period"
				    label="研究阶段"
				    :formatter="PeriodFilter"
				    align="center"
				    min-width="100">
				</el-table-column>
				<el-table-column
				    prop="CName"
				    label="所在社区"
				    align="center"
				    min-width="100">
				</el-table-column>
				<el-table-column
				    prop="GroupType"
				    label="研究组别"
				    :formatter="GroupTypeFilter"
				    align="center"
				    min-width="100">
				</el-table-column>
				<el-table-column
				    prop="IntensityOfIntervention"
				    label="干预强度"
				    :formatter="IntensityFilter"
				    align="center"
				    min-width="100">
				</el-table-column>
				<el-table-column
				    prop="UserState"
				    label="用户状态"
				    :formatter="UserStateFilter"
				    align="center"
				    min-width="100">
				</el-table-column>
			</el-table>
		</template>
		<!--分页-->
		<div class="block mg-20-auto pagination-fixed">
		    <el-pagination
		            @size-change="handleSizeChange"
		            @current-change="handleCurrentChange"
		            :current-page.sync="pageId"
		            :page-sizes="[10, 20, 30, 40]"
		            :page-size="pageSize"
		            layout="total, sizes, prev, pager, next, jumper"
		            :total="total">
		    </el-pagination>
		</div>
    </div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
    data() {
        return {
        	searchData:{
        	    count:'',
        	},
        	tableData:[],
        	loading:true,
        	pageId:1,
        	total:null,
        	pageSize:10,
        	options1: [{value: '', label: '全部'},{value: '1', label: 'AA'},{value: '2', label: 'A'}],
        	options2:[{value: '', label: '全部'},{value: '1', label: '面对面'}, {value: '2', label: '电话'}],
        	optionss3: [{value: '', label: '不限'}],
        	PeriodFilter(row, column, cellValue, index){
        	    return cellValue==1?'孕前期':cellValue==2?'怀孕期':'儿童期'
        	},
        	GroupTypeFilter(row, column, cellValue, index){
        	    return cellValue=='1'?'A':'B'
        	},
        	IntensityFilter(row, column, cellValue, index){
        	    if(cellValue=='1'){
        	        return 'AA'
        	    }
        	    else if(cellValue=='2'){
        	        return 'A'
        	    }
        	    else{
        	        return '-'
        	    }
        	},
        	DateFilter(row, column, cellValue, index){
        		return cellValue.substring(0,10)
        	}
        }
    },
    filters:{
        mobileFilter(cellValue) {
            return cellValue.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
        },
    },
    methods: {
    	UserStateFilter(row, column, cellValue, index){
    	    switch (cellValue){
    	        case '1':
    	            return '活跃'
    	            break;
    	        case '2':
    	            return '不活跃'
    	            break;
    	        case '3':
    	            return '不活跃'
    	            break;
    	        case '4':
    	            return '不活跃'
    	            break;
    	        case '5':
    	            return '不活跃'
    	            break;
    	    }
    	},
    	getList:function(){           //获取一级信息列表
    	    let that=this
    	    that.loading=true
    	    that.service({
    	        url:'/Statistic/StatisticPlan',
    	        method:'get',
    	        params:{
    	        	pageCount:(that.pageId-1),
    	        	pageSize:that.pageSize,
    	        	    ...that.searchData,
    	        }
    	        }).then(response=>{
    	        	// console.log(response,222)
    	            that.tableData=response.dtData;
    	            that.total =parseInt(response.dtData[0].TotalCount);
    	            that.loading=false
    	        }).catch(data=>{
    	        that.loading=false
    	    })
    	},
    	handleCurrentChange(val) {    //页数改变
    	    this.pageId = val
    	    this.getList()
    	},
    	handleSizeChange(val) {       //条数改变
    	    this.pageSize=val;
    	    this.getList()
    	},
    	checkList:function(){
    	    this.pageId=1;
    	    this.pageSize=10;
    	    this.total=null;
    	    this.getList()
    	},
    },
    mounted(){
    	let that = this
    	that.getList()
		for(var i=1;i<=30;i++){
			let obj={
				value:i,
				label:i
			}
			that.optionss3.push(obj)
		}
    }
  }
</script>
<style scoped lang="scss">
.title{
	display: inline-block;
	margin-bottom: 20px;
	font-size: 15px;
}
.el-table{
	margin-bottom: 70px;
}
</style>